<template>
  <div class="app-container">
    <el-card class="box-card">
      <action-scope :data="data">
        <template #actionScope="item">
          插槽作用域里面的数据
          <div>
            {{ item.data }}
          </div>
          <hr>
        </template>
      </action-scope>
      <el-button @click="updeData">父组件按钮->修改插槽里面的内容</el-button>
    </el-card>
  </div>
</template>

<script>

import ActionScope from "./actionScope.vue";
export default {
  components: {
    ActionScope
  },
  data() {
    return {
      data: "父组件 -> 子组件 -> slot ->父组件"
    };
  },
  methods: {
    updeData() {
      let NUM = 0;
      this.data = this.data + NUM++;
    }
  }
};
</script>

<style scoped lang="scss">
.slot-name{
  height: 50px;
  line-height: 50px;
}
</style>
